<template>
  <div @touchstart="loadPosition" @touchend="changeEnd" style="width: 100%;">
    <slot></slot>
  </div>
</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data () {
      return {}
    },
    components: {},
    methods: {
      loadPosition (e)  {
        this.startX = e.changedTouches[0].clientX
        this.startY = e.changedTouches[0].clientY
        this.oldX = this.startX
        this.oldY = this.startY
      },
      //改变Activeindex
      changeEnd (e) {
        var endX = e.changedTouches[0].clientX
        var endY = e.changedTouches[0].clientY

        var X = endX - this.startX;
        var Y = endY - this.startY;
        if (Math.abs(X) > Math.abs(Y) && Math.abs(X) > 100 && this.startX > 50) {
          if (X > 0) {
            //向右滑滑动

            this.$emit('sliderRight')
          } else {
            //向左滑动
            this.$emit('sliderLeft')

          }

        }
      },
    }
  }
</script>

<style>

</style>
